<template>
	<div id="setting" class="panel">
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
			<h1 class="mui-center mui-title">设置</h1>
		</div>
		<div class="mui-content">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell mui-media">
						<a class="mui-navigate-right" href="#account">
							<img class="mui-media-object mui-pull-left head-img" id="head-img" :src="userHeadPhotoSrcUrl">
							<div class="mui-media-body">
								Hello MUI
								<p class='mui-ellipsis'>账号:hellomui</p>
							</div>
						</a>
					</li>
				</ul>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<a href="#account" class="mui-navigate-right">账号与安全</a>
					</li>
				</ul>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<a href="#notifications" class="mui-navigate-right">新消息通知</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#privacy" class="mui-navigate-right">隐私</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#general" class="mui-navigate-right">通用</a>
					</li>
				</ul>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V3.1.0</i></a>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" style="text-align: center;">
						<a @tap="logout">退出登录</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'setting',
		data() {
			return {
				userHeadPhotoSrcUrl: "http://127.0.0.1:8020/mui/img/logo.png"
			}
		},
		methods: {
			logout() {
				var btnArray = ['是', '否'],
					_this = this;
				mui.confirm('确认退出登录？', "", btnArray, function(e) {
					if(e.index == 0) {
						_this.$router.replace("/login");
					} else {
						console.log("否");
					}
				})
			}
		},
		created() {
			mui.init();
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.mui-table-view {
		margin-top: 20px;
	}
</style>